<template>
  <view class="container">
    <swiper class="Pet_img" circular>
      <block v-if="storePethealthItem.sliderImgs || storePethealthItem.showVideo">
        <swiper-item v-if="storePethealthItem.showVideo">
          <video class="Pet_img_video" loop enable-play-gesture :src="storePethealthItem.showVideo" controls></video>
        </swiper-item>
        <swiper-item v-if="storePethealthItem.sliderImgs" v-for="(item,i) in storePethealthItem.sliderImgs" :key="i">
          <image :src="item" mode="widthFix"></image>
        </swiper-item>
      </block>
      <swiper-item v-else>
        <image :src="storePethealthItem.previewImage" mode="widthFix"></image>
      </swiper-item>
    </swiper>

    <view class="particilars_box">
      <!-- 头部 -->
      <view class="particilars_box_header">
        <view class="particilars_box_header_img">
          <image :src="storePethealthItem.previewImage" mode="aspectFill"></image>
        </view>
        <image v-if="storePethealthItem.sex === '0'" src="@/static/images/mine/nan.png" mode="aspectFill"
          class="imageMin"></image>
        <image v-else src="@/static/images/mine/nv.png" mode="aspectFill" class="imageMin"></image>
        <view class="particilars_box_header_tag">
          <view class="particilars_box_header_tag_box">
            <view class="particilars_box_header_tag_Item">{{storePethealthItem.neuter === '0'? '已绝育': '未绝育' }}</view>
            <view class="particilars_box_header_tag_Item1">{{storePethealthItem.coatColor}}</view>
          </view>
          <image v-if="isLogin && !userInfo.isUser" src="/static/edit.png" mode="aspectFill" class="minImage" @click="editnavTo"></image>
          <!-- v-if="isLogin && !userInfo.isUser" -->
        </view>

        <view class="particilars_box_header_title">
          <h1>{{storePethealthItem.productName}}</h1>
          <view class="particilars_box_header_audio">

            <image v-if="playing" src="/static/images/mine/zanitn.png" mode="widthFix" @click="play"></image>
            <image v-if="pauseing" src="/static/images/mine/bofan.png" mode="widthFix" @click="pause"></image>
          </view>
        </view>

        <view class="particilars_box_header_text">
          <text>品种：{{storePethealthItem.category.categoryName}}</text>
        </view>

        <view class="particilars_box_header_text particilars_box_header_text1">
          <text>出生日期：{{storePethealthItem.birthday}}</text>
          <text>到店日期：{{storePethealthItem.arriveHomeDate? storePethealthItem.arriveHomeDate : '未知'}}</text>
        </view>

        <!-- 购买 -->
        <view class="particilars_box_header_buy" v-if="storePethealthItem.price">
          <view class="particilars_box_header_buy_img">
            <image :src="storePethealthItem.previewImage" mode="aspectFill"></image>
            <view class="particilars_box_header_buy_img_text">
              <h1>{{storePethealthItem.productName}}</h1>
              <text>有意购买请咨询本店</text>
            </view>
          </view>
          <view class="particilars_box_header_buy_mani">
            ￥{{storePethealthItem.price}}
          </view>
        </view>

        <!-- 性格 -->
        <view class="particilars_box_header_body">
          <view class="particilars_box_header_body_character">
            <h1>性格特点</h1>
            <view class="particilars_box_header_body_charimg"></view>
            <view class="particilars_box_header_body_chartext">
              <text>{{storePethealthItem.nature? storePethealthItem.nature : '未知'}}</text>
            </view>
          </view>

          <view class="particilars_box_header_body_character">
            <h1>撸宠方式</h1>
            <view class="particilars_box_header_body_charimg"></view>
            <view class="particilars_box_header_body_chartext">
              <text>{{storePethealthItem.interactive? storePethealthItem.interactive : '未知'}}</text>
            </view>
          </view>

          <view class="particilars_box_header_body_character particilars_box_header_body_character1">
            <view class="title">
              <h1>Ta的故事</h1>
              <h1 @click="editClick"  v-if="isLogin && !userInfo.isUser">编辑</h1>
            </view>
            <view class="particilars_box_header_body_charimg"></view>
            <view class="particilars_box_header_body_chartext">
              <!-- 宠物详情信息 -->
              <rich-text v-if="storePethealthItem.description" :nodes="storePethealthItem.description"></rich-text>
              <text v-else>未知</text>
            </view>
          </view>

        </view>

      </view>

      <view class="new_pet">
        <button type="success" class="new_pet_button new_pet_button1"
          @click="navTo('/subpkg/productdetails/productdetails?id='+storePethealthItem.id)">相关评价</button>
        <button type="success" class="new_pet_button"
          @click="navTo('/subpkg/health/health?recordId=' + recordId)">生活日记</button>
      </view>

    </view>
  </view>
</template>

<script>
  import {
    storePethealthItem,
    storePetbehavior
  } from '@/api/home.js'
  import {
    mapGetters,
    mapActions,
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        recordId: 0,
        // 行为
        storePethealthItem: [],
        // 控制音乐
        playing: false,
        pauseing: false,
        aCxt: false
      };
    },
    // #ifdef MP
    //发送给朋友
    onShareAppMessage: function() {
      return {
        title: this.storePethealthItem.productName,
        imageUrl: this.storePethealthItem.previewImage,
        path: '/subpkg/particulars/particulars?id=' + this.storePethealthItem.id
      };
    },
    //分享到朋友圈
    onShareTimeline: function() {
      return {
        title: this.storePethealthItem.productName,
        imageUrl: this.storePethealthItem.previewImage,
        path: '/subpkg/particulars/particulars?id=' + this.storePethealthItem.id
      };
    },
    // #endif
    onLoad(options) {
      this.recordId = options.id
      // 档案
      this.storePethealth(this.recordId)
    },
    computed: {
      ...mapGetters('m_user', ['isLogin', 'userInfo']),
    },
    methods: {
      // 档案
      storePethealth(recordId) {
        storePethealthItem(recordId).then(res => {
          this.storePethealthItem = res.data;
          this.storePethealthItem.price = Number(res.data.price)

          if (this.storePethealthItem.sliderImgs) {
            this.storePethealthItem.sliderImgs = res.data.sliderImgs.split(',');
          }
          // console.log(this.storePethealthItem.sliderImgs)
          this.storePethealthItem.description = res.data.description.replace(/<img /g, '<img style="width:100%;" ')
          if (this.storePethealthItem.barking && this.storePethealthItem.barking.trim() != '') {
            this.createInnerAudioContext();
            this.playing = true;
          }
        }).catch(err => err)
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        })
      },
      editnavTo() {
        uni.setStorageSync('editdata', this.storePethealthItem)
        this.navTo('/subpkg/newshoprecord/newshoprecord')
      },
      createInnerAudioContext() {
        if (!this.aCxt) {
          this.aCxt = uni.createInnerAudioContext();
          this.aCxt.src = this.storePethealthItem.barking;
          this.aCxt.onPlay(() => {
            this.playing = false;
            this.pauseing = true;
          });
          this.aCxt.onPause(() => {
            this.playing = true;
            this.pauseing = false;
          });
        }
      },
      play() {
        this.aCxt.play();
      },
      pause() {
        this.aCxt.pause();
      },
      editClick() {
        this.navTo('/subpkg/particulars/edit?id=' + this.storePethealthItem.id)
        uni.setStorageSync('textValue', this.storePethealthItem.description)
      }
    }
  }
</script>

<style lang="scss">
  /deep/.uni-scroll-view ::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }

  /deep/::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
  }

  page {
    background-color: #fff;
  }

  .container {
    position: relative;
    padding-bottom: 128rpx;

    .Pet_img {
      position: relative;
      width: 748rpx;
      height: 561rpx;

      image {
        width: 100%;
        min-height: 561rpx;
      }

      .Pet_img_video {
        width: 100%;
        height: 100%;
      }
    }

    .particilars_box {
      position: relative;
      z-index: 1;
      width: 100%;
      border-top-left-radius: 30px;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      margin-top: -35px;

      .particilars_box_header {
        position: relative;
        // height: 277rpx;
        padding: 135rpx 64rpx 50rpx;
        background-color: #fff;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;

        .particilars_box_header_img {
          position: absolute;
          top: -103rpx;
          left: 48rpx;
          z-index: 2;
          width: 180rpx;
          height: 180rpx;
          border-radius: 50%;
          overflow: hidden;
          border: 8px solid #fff;
          box-shadow: 0px 0px 20rpx 3rpx rgba(0, 0, 0, 0.04);

          image {
            width: 100%;
            height: 100%;
          }
        }

        .imageMin {
          position: absolute;
          left: 190rpx;
          top: 66rpx;
          z-index: 999;
          width: 40rpx;
          height: 40rpx;
          border: 1px solid #fff;
          border-radius: 50%;
        }

        .particilars_box_header_tag {
          width: 56%;
          position: absolute;
          top: 30rpx;
          left: 270rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .particilars_box_header_tag_box {
            display: flex;
            align-items: center;

            view {
              font-size: 28rpx;
              background-color: rgba(255, 102, 102, 0.15);
              border-radius: 217rpx;
              text-align: center;
              line-height: 42rpx;
              padding: 1px 25rpx;
              margin-left: 25rpx;
            }

            .particilars_box_header_tag_Item {
              background-color: rgba(255, 122, 122, 0.15);
              color: rgba(255, 122, 122, 1);
            }

            .particilars_box_header_tag_Item1 {
              background-color: rgba(255, 141, 26, 0.15);
              color: rgba(255, 141, 26, 1);
            }
          }

          .minImage {
            width: 40rpx;
            height: 40rpx;
          }
        }

        .particilars_box_header_title {
          display: flex;
          align-items: center;
          justify-content: space-between;

          h1 {
            font-size: 44rpx;
            font-weight: bold;
            color: rgba(61, 61, 61, 0.9);
          }

          .particilars_box_header_audio {
            position: relative;
            width: 42rpx;
            height: 42rpx;

            audio {
              position: absolute;
              top: 0px;
              left: 0px;
              z-index: 0;
              visibility: hidden;
              width: 100% !important;
              height: 100% !important;
              // overflow: hidden;
            }

            image {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
            }
          }
        }

        .particilars_box_header_text {
          font-size: 28rpx;
          color: rgba(139, 139, 139, 0.6);
          margin: 20rpx 0;
        }

        .particilars_box_header_text1 {
          display: flex;
          justify-content: space-between;
          margin-bottom: 30rpx;
        }

        .particilars_box_header_buy {
          height: 144rpx;
          background-color: rgba(222, 222, 222, 0.2);
          border-radius: 10rpx;
          padding: 20rpx 24rpx 20rpx 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .particilars_box_header_buy_img {
            height: 100%;
            display: flex;
            align-items: center;

            image {
              width: 104rpx;
              height: 104rpx;
              margin-right: 24rpx;
              border-radius: 50%;
            }

            .particilars_box_header_buy_img_text {

              // height: 100%;
              h1 {
                font-size: 30rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
                margin-top: 5rpx;
              }

              text {
                font-size: 24rpx;
                color: rgba(139, 139, 139, 0.6);
              }
            }
          }

          .particilars_box_header_buy_mani {
            font-size: 42rpx;
            color: rgba(255, 102, 102, 1);
          }
        }

        .particilars_box_header_body {
          display: flex;
          flex-wrap: wrap;

          .particilars_box_header_body_character1 {
            width: 100% !important;
          }

          .particilars_box_header_body_character {
            width: 50%;
            position: relative;
            margin-top: 30rpx;

            h1 {
              position: relative;
              z-index: 10;
              color: rgba(61, 61, 61, 0.8);
              font-size: 36rpx;
              font-weight: bold;
              margin-bottom: 15rpx;
            }

            .title {
              margin-bottom: 20rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }

            .particilars_box_header_body_charimg {
              position: absolute;
              top: 34rpx;
              width: 159rpx;
              height: 15rpx;
              background: linear-gradient(90deg, rgba(253, 211, 56, 1) 0%, rgba(253, 211, 56, 0) 100%);
              border-radius: 371rpx;
            }

            .particilars_box_header_body_chartext {
              width: 100%;

              text {
                display: inline-block;
                font-size: 28rpx;
                color: rgba(139, 139, 139, 0.8);
                margin: 10rpx 20rpx 10rpx 0;
              }

              image {
                width: 100%;
              }
            }
          }
        }
      }

      .particilars_box_body {
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid rgba(241, 241, 241, 1);
        border-bottom: 1px solid rgba(241, 241, 241, 1);

        navigator {
          color: rgba(150, 150, 150, 1);
          font-size: 28rpx;
          margin-right: 15rpx;
        }

        /deep/ .van-icon {
          color: rgba(150, 150, 150, 1);
        }
      }

    }

    .Pet_box_body_text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .new_pet {
      position: fixed;
      bottom: 0;
      z-index: 20;
      width: 750rpx;
      height: 112rpx;
      box-sizing: border-box;
      background-color: #fff;
      display: flex;

      .new_pet_button {
        width: 50%;
        height: 100%;
        background-color: #FDD338;
        border-radius: 0;
        color: rgba(61, 61, 61, 1);
        line-height: 112rpx;
      }

      .new_pet_button1 {
        background-color: #FFEEB3;
      }
    }
  }
</style>
